<script id="mediaplayerTemp" type="text/x-kendo-template">
    <div class="row">
        <div class="col-12">
            <div class="card mb-3">
                <h5 class="card-header">普通媒体播放器</h5>
                <div class="card-body">
                    <div class="row no-gutters">
                        <div class="col-xl-8">
                            <div id="generalMediaPlayer"></div>
                        </div>
                        <div class="col-xl-4">
                            <div id="playList"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style scoped>
        #generalMediaPlayer {
            height: 600px;
            background: #000;
        }
        #playList {
            height: 600px;
        }
        #playList div:hover {
            background: #ededed;
            cursor: pointer;
        }
        #playList time {
            position: absolute;
            top: 0;
            right: 0;
            margin: .5rem;
            padding: .2rem .25rem;
            font-size: 12px;
            color: #fff;
            background: #000;
            opacity: .64;
        }
        @media only screen and (min-width: 1024px) and (max-width: 1199px) {
            #generalMediaPlayer {
                height: 400px;
            }
            #playList {
                height: 200px;
            }
        }
        @media only screen and (min-width: 576px) and (max-width: 1023px) {
            #generalMediaPlayer {
                height: 360px;
            }
            #playList {
                height: 180px;
            }
        }
        @media only screen and (max-width: 575px) {
            #generalMediaPlayer {
                height: 240px;
            }
            #playList {
                height: 160px;
            }
        }
    </style>
</script>